<template>
	<view class="index page">
		<view class="header">
			<nav-bar title="活动详情"></nav-bar>
		</view>
		<view class="main">
			<view class="header">
				<view class="poster">
					<image :src="activeDetails.img" mode="aspectFill"></image>
				</view>
				<view class="active-details">
					<view class="left">
						<view class="title">
							{{activeDetails.name}}
						</view>
						<view class="time">
							时间:{{activeDetails.hold_time}}
						</view>
						<view class="addr">
							地点:{{activeDetails.address}}
						</view>
						<view class="player">
							<view class="user" :style="{width:28* 3+42 + 'rpx'}">
								<view class="user-item" v-for="(item, index) in [1,2,3,4]" :key="index" :style="{left:(28) * index+'rpx'}">
									<image src="" mode=""></image>
								</view>
							</view>
							<text>等{{activeDetails.join}}人参加</text>
						</view>
					</view>
				</view>
			</view>
			<view class="conter">
				<view class="left">
					<image src="" mode=""></image>
				</view>
				<view class="right">
					<view class="partment">
						活动主办: {{activeDetails.deptName}}
					</view>
					<view class="head">
						活动负责人: {{activeDetails.leader}}
					</view>
					<view class="phone">
						<view class="phone-icon">
							<image src="@/static/image/phone.png" mode="widthFix"></image>
						</view>
						<text>{{activeDetails.phone}}</text>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="title">
					活动说明
				</view>
				<view class="content">
					{{activeDetails.content}}
				</view>
				<view class="button">
					<button>我要报名</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getActiveDetailsApi} from "@/common/api/eventPlaza_api.js"
	export default {
		data(){
			return{
				id:0,
				activeDetails:{},
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getActiveDetails();
		},
		methods:{
			getActiveDetails(){
				uni.showLoading({
					title:'加载中...'
				})
				getActiveDetailsApi(this.id)
				.then((res)=>{
					console.log(res);
					this.activeDetails = res.data;
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/common/style/common.scss";
	.index{
		@include flex-c;
		background-color: #F8F8F8;
		>.header{
			flex:0 0 auto;
		}
		>.main{
			flex: 1 0 0;
			overflow: auto;
			>.header{
				background-color: #FFFFFF;
				.poster{
					width: 100%;
					height: 426rpx;
					image{
						width: 100%;
						height: 100%;
						background-color: red;
					}
				}
				.active-details{
					padding: 24rpx 34rpx;
					color: #4A4A4A;
					font-size: 24rpx;
					.left{
						.title{
							color: #000000;
							font-size: 32rpx;
							line-height: 52rpx;
							padding: 0 0 8rpx;
						}
						.time,.addr{
							line-height: 48rpx;
						}
						.player{
							padding: 22rpx 0 0;
							@include flex-r-start-center;
							.user{
								@include flex-r;
								position: relative;
								height: 42rpx;
								.user-item{
									position: absolute;
									@include avatar(42);
									background-color: red;
								}
							}
							text{
								display: flex;
								padding: 0 16rpx;
								font-size: 20rpx;
							}
						}
					}
				}
			}
			>.conter{
				margin: 16rpx 0;
				@include flex-r-start-center;
				padding: 24rpx 34rpx;
				background-color: #FFFFFF;
				.left{
					width: 216rpx;
					height: 192rpx;
					border-radius: 8rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
						background-color: red;
					}
				}
				.right{
					padding: 0 28rpx;
					color: #4A4A4A;
					font-size: 28rpx;
					font-size: 600;
					.partment,.head{
						line-height: 68rpx;
					}
					.phone{
						@include flex-r-start-center;
						.phone-icon{
							@include avatar(34);
						}
						>text{
							padding: 0 12rpx;
						}
					}
				}
			}
			>.footer{
				padding: 24rpx 48rpx 58rpx;
				background-color: #FFFFFF;
				.title{
					@include flex-r-center-start;
					color: #4A4A4A;
					font-size: 28rpx;
					font-weight: 600;
				}
				.content{
					padding: 16rpx 0 50rpx;
					color: #6C6C6C;
					font-size: 24rpx;
				}
				.button{
					padding: 0 48rpx;
					button{
						@include button;
						width: 100%;
						height: 84rpx;
						line-height: 84rpx;
						background: linear-gradient(90deg, #0096FF 0%, #0069FF 100%);
						font-size: 32rpx;
						color: #FFFFFF;
						font-weight: 600;
						border-radius: 44rpx;
					}
				}
			}
		}
	}
</style>